import { ArrowRight } from '@nutui/icons-react-taro'
import { Button, Skeleton } from '@nutui/nutui-react-taro'
import { Text, View } from '@tarojs/components'
import React from 'react'
import { QuotationCategory, THEME_COLORS } from '../../constants/index'
import Card from '../card'
import './index.less'

interface FeeDetailsProps {
  /** 自定义样式类名 */
  className?: string
  /** 是否显示 Card 包装 */
  showCard?: boolean
  /** 费用明细数据 */
  categories?: QuotationCategory[]
  /** 总金额 */
  totalAmount?: string
  /** 标题文本 */
  title?: string
  /** 总计标签文本 */
  totalLabel?: string
  /** 备注文本 */
  note?: string
  /** 是否显示备注 */
  showNote?: boolean
  /** 主题色 */
  primaryColor?: string
  /** Card 组件的 padding 设置 */
  cardPadding?: 'none' | 'sm' | 'md' | 'lg'
  /** Card 组件的圆角设置 */
  cardRounded?: 'none' | 'sm' | 'md' | 'lg'
  showLess?: boolean
  loading?: boolean
  showTitle?: boolean
  showCustomized?: boolean
  handleCustomizedClick?: (key?: string | number) => void
}

const FeeDetails: React.FC<FeeDetailsProps> = ({
  className = '',
  showCard = true,
  showLess = false,
  categories,
  totalAmount,
  title = '费用明细',
  totalLabel = '总计',
  note = '*此报价为估算价格，最终价格以实际测量和材料选择为准。',
  showNote = true,
  primaryColor = THEME_COLORS.primary,
  cardPadding = 'md',
  cardRounded = 'none',
  loading = false,
  showTitle = true,
  showCustomized = false,
  handleCustomizedClick,
}) => {
  // 使用传入的数据或默认数据
  const displayCategories = categories || []
  const displayTotalAmount = totalAmount || '¥0'

  const content = (
    <View className={`fee-details ${className}`}>
      {loading ? (
        <Skeleton rows={3} title animated />
      ) : (
        <View className='content-section'>
          {showTitle && <Text className='section-title'>{title}</Text>}
          <View className='quotation-categories'>
            {displayCategories.map((category, categoryIndex) => (
              <View key={categoryIndex} className='category-group'>
                <View className='category-header'>
                  <View className='category-header-left'>
                    {category.category}
                    {showCustomized && (
                      <Button
                        size='mini'
                        onClick={() => handleCustomizedClick && handleCustomizedClick(category?.key)}
                        fill='none'
                        rightIcon={<ArrowRight />}>
                        去定制
                      </Button>
                    )}
                  </View>
                  <Text>{category.total}</Text>
                </View>
                {!showLess && (
                  <View className='category-items'>
                    {category.items?.map((item, itemIndex) => (
                      <>
                        <View key={itemIndex} className='category-item'>
                          <Text>{item.name}</Text>
                          <Text>{item.price}</Text>
                        </View>
                        {item.materials && (
                          <View className='category-item'>
                            <Text>{item.materials.name}</Text>
                            <Text>{item.materials.price}</Text>
                          </View>
                        )}
                      </>
                    ))}
                  </View>
                )}
              </View>
            ))}
          </View>
          <View className='quotation-footer'>
            <View className='quotation-summary'>
              <Text>{totalLabel}</Text>
              <Text className='summary-total' style={{ color: primaryColor }}>
                {displayTotalAmount}
              </Text>
            </View>
            {showNote && <Text className='quotation-note'>{note}</Text>}
          </View>
        </View>
      )}
    </View>
  )

  if (showCard) {
    return (
      <Card padding={cardPadding} rounded={cardRounded} className='quotation-card'>
        {content}
      </Card>
    )
  }

  return content
}

export default FeeDetails
